import ECharts from 'vue-echarts';
import * as echarts from 'echarts';
import echartsApi from '@/api/echarts/echarts'
export default {
  name: "index",
  components: {
    ECharts
  },
  data() {
    return {
      days:7,
      order: {
        title: {
          text: '订单统计与预测'
        },
        tooltip: {
          trigger: 'axis'
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        legend: {
          data: ['采购单', '销售单']
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [
        ]
      },
      storeUsageList:[],
      goodsType : {
        title: {
          text: '商品类型分布',
          subtext: '',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: []
      },
      userRole: {
        title: {
          text: '用户角色分布',
          subtext: '',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: []
      },
      totalResult:{},
    };
   
  },
  created(){
this.init()
  },
  methods:{
    init(){
      this.orderTotal(this.days)
      this.storeUsage()
      this.goodsTypeTotal()
      this.userRoleTotal(),
      this.totalTotal()
    },
      orderTotal(val){
        echartsApi.orderTotal(val).then(response =>{

          let data = response.data
          this.order.xAxis.data = data.date
          this.order.series = data.seriesList
        })
        return false
      },
      storeUsage(){
        echartsApi.storeUsage().then(response => {
          let data = response.data
          this.storeUsageList =[];
          for(let i=0;i<data.length;i++){
            
           let option = {
            title: {
              text: data[i].name+'使用率'
            },
            tooltip: {
              formatter: '{a} <br/>{b} : {c}%'
            },
            series: [
              {
                name: data[i].name,
                type: 'gauge',
                progress: {
                  show: true
                },
                detail: {
                  valueAnimation: true,
                  formatter: '{value}%'
                },
                data: [
                  {
                    value: data[i].usage,
                    name: '已使用'
                  }
                ]
              }
            ]
          };
            this.storeUsageList.push(option)
          }
        })
      },
      goodsTypeTotal(){
        echartsApi.goodsTypeTotal().then(response =>{
          let data = response.data
          this.goodsType.series = [
          {
            name: '商品类型',
            type: 'pie',
            radius: '50%',
            data: data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
        })
      },
      userRoleTotal(){
        echartsApi.userRoleTotal().then(response =>{
          let data = response.data
          this.userRole.series = [
          {
            name: '角色类型',
            type: 'pie',
            radius: '50%',
            data: data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
        })
      },
      totalTotal(){
        echartsApi.total().then(response =>{
          this.totalResult = response.data
        })
      },
      

    }
};